<template>
  <div>
    <h2>home页</h2>
    <router-link to="/about">去关于我们</router-link>
    <button @click="ADD_NUM(15)">+</button>
    {{ num }}
    {{ DOUBLE_NUM }}
    <button @click="REDUCE_NUM(10)">-</button>
    <ul>
      <li v-for="cate in cates" :key="cate.id">
        <img :src="cate.icon" alt="">
        <h5>{{cate.name}}</h5>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  name: 'Home',
  methods: {
    ...mapMutations(['ADD_NUM', 'REDUCE_NUM']),
    ...mapActions(['FETCH_CATES'])
  },
  created () {
    this.FETCH_CATES({page: 1, pageSize: 7})
  },
  computed: {
    ...mapState(['cates', 'num']),
    ...mapGetters(['DOUBLE_NUM'])
  }
}
</script>

<style lang="scss" scoped>

</style>
